<template>
	<view class="container">
		<view class="shicaiArea">
			启用冰箱食材
			<switch checked class="uni-title" style="transform:scale(0.7)" color="#EEAF4B" @change="switchChange" />
		</view>
		<view class="shicaiContainer">
			<view class="shicaiArea">
				蔬菜
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.cai"></image>
				<view >
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#88C057" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">空心菜</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#88C057" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">菜心</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
				</view>
				
			</view>
			<view class="shicaiArea">
				肉类
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.meet"></image>
				<view >
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#D14937" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">牛肉</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#D14937" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">鸡肉</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
				</view>
			</view>
			<view class="shicaiArea">
				调味料
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.salt"></image>
				<view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#48A0DC" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">酱油</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#48A0DC" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">盐</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
				</view>
			</view>
			<view class="shicaiArea">
				主食
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.rice"></image>
				<view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#EEAF4B" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">米</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#EEAF4B" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">面</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
				</view>
			</view>
			<view class="shicaiArea">
				水果
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.fruits"></image>
				<view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#EEAF4B" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">苹果</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
					<view class="shicaiItem">
						<tui-tag custom-bg-color="#EEAF4B" custom-text-color="#ffffff" size="28rpx" padding="7rpx" >
							<text style="margin-left: 8rpx">梨</text>
							<tui-icon name="shut" :size="15" color="#ffffff"></tui-icon>
						</tui-tag>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="shicaiArea">
				<view style="display: flex; justify-content: start; align-items: center;">
					<view style="margin-right: 40rpx;">
						<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.guo"></image>
					</view>
					<tui-button bgColor="#546A79" textColor="#ffffff" size="30" width="80rpx" height="40rpx" >炒锅</tui-button>
					<tui-button bgColor="#546A79" textColor="#ffffff" size="30" width="80rpx" height="40rpx" >汤锅</tui-button>
					<tui-button plain  textColor="#546A79" borderColor="#546A79" size="30" width="120rpx" height="40rpx">电饭煲</tui-button>
					<tui-button plain  textColor="#546A79" borderColor="#546A79" size="30" width="140rpx" height="40rpx">空气炸锅</tui-button>
					<tui-button plain  textColor="#546A79" borderColor="#546A79" size="30" width="100rpx" height="40rpx">烤箱</tui-button>
				</view>
			</view>
			<!--
			<view>
				烹饪时长
				<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.spicy"></image>
			</view>
			-->
			<view class="shicaiArea">
				<view style="display: flex; justify-content: start; align-items: center;">
					<view style="margin-right: 40rpx;">
						
						<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.way"></image>
					</view>
					<tui-button bgColor="#EEAF4B" textColor="#ffffff" size="30" width="100rpx" height="40rpx" >中餐</tui-button>
					<tui-button plain  textColor="#EEAF4B" borderColor="#EEAF4B" size="30" width="100rpx" height="40rpx">西餐</tui-button>
					<tui-button plain  textColor="#EEAF4B" borderColor="#EEAF4B" size="30" width="100rpx" height="40rpx">减脂餐</tui-button>
				</view>
				
			</view>
			<view class="shicaiArea" >
				<view style="margin-right: 40rpx;display: inline-block;">
					<image style="width: 20px; height: 20px; " mode="aspectFit" :src="imgList.spicy"></image>
				</view>
				<tui-rate :current="spicyVal" :quantity="3" active="#D14937"></tui-rate>
			</view>
		</view>
		<view style="display: flex; justify-content: center; align-items: center;">
			<tui-button  bgColor="#EEAF4B" textColor="#ffffff"  width="200rpx" height="50rpx">生成菜谱</tui-button>
		</view>
		<tui-tabbar :current="currentTab" color="#AC9157" backgroundColor="#F8F4E1" :tabBar="tabBar"
			selectedColor="#AC9157" @click="tabbarSwitch">
		</tui-tabbar>
	</view>
</template>

<script>
	import {
		useCounterStore
	} from "../../stores/counter.js";
	import {
		mapState,
		mapActions
	} from 'pinia';
	export default {
		data() {
			return {
				spicyVal:1,
				imgList:{
					"cai": "/static/icon/cai.png",
					"meet": "/static/icon/meet.png",
					"salt": "/static/icon/salt.png",
					"rice": "/static/icon/rice.png",
					"fruits": "/static/icon/fruit.png",
					"guo": "/static/icon/guo.png",
					"way": "/static/icon/way.png",
					"spicy": "/static/icon/spicy.png",
				},
				tabBar: [{
						pagePath: '/pages/index/list/index',
						text: '清单',
						iconPath: '/static/icon/qingdan.svg',
						selectedIconPath: '/static/icon/qingdan-s.png'
					},
					{
						pagePath: '/pages/index/plan/index',
						text: '计划',
						iconPath: '/static/icon/jihua.svg',
						selectedIconPath: '/static/icon/jihua-s.png'
					},
					{
						pagePath: '/pages/index/index',
						text: '选食材',
						iconPath: '/static/icon/cook.svg',
						hump: true,
						selectedIconPath: '/static/icon/cook-s.png'
					},
					{
						pagePath: '/pages/index/fridge/index',
						text: '冰箱',
						iconPath: '/static/icon/bingxiang.svg',
						selectedIconPath: '/static/icon/bingxiang-s.png'
					},
					{
						pagePath: '/pages/index/my/index',
						text: '我的',
						iconPath: '/static/icon/my.svg',
						selectedIconPath: '/static/icon/my-s.png',
						//num: 2,
						//isDot: true,
						//verify: true
					}
				]
			}
		},
		computed: {
			// 把pinia 的state映射到页面
			...mapState(useCounterStore, ["currentTab"])
			},
			onLoad() {
				uni.hideTabBar();
			},
			methods: {
				switchChange(){},
				tabbarSwitch(e) {
					uni.switchTab({
						url: e.pagePath,
						success: () => { // 确保路由切换成功后再更新状态
							this.changeCurrentTab(e.index)
						}
					});
				},
				// 把pinia的方法映射到页面
				...mapActions(useCounterStore, ["changeCurrentTab"])
			}
		}
</script>

<style>
.container{
	margin-top: 0.5rem;
}
.shicaiContainer{
	/*border: 0.15rem #EEAF4B dashed;*/
	background-color: rgb(248 244 225 /50%);
	padding: 0.1rem 0.1rem 0.1rem 0.1rem;
	border-radius: 5px;
	margin: 0 0.5rem 0.5rem 0.5rem;
}
.shicaiItem{
	margin: 0 0 0 0.3rem;
	display: inline-block;
}
.shicaiArea{
	margin: 0 0.5rem 1rem 0.5rem;
}
</style>